<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>stepic — 众多玩家喜爱的游戏平台</title>
    
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/style.css">

    <script src="./js/jquery-3.5.1.js"></script>
    <script src="./js/main.js"></script>
</head>
<body>
    <header class="page-head" id="head">
        <header class="login">
            <a href="./login.html">登录</a>
        </header>
        <div class="head-bottom">
            <div class="head-logo">
                <img src="./img/logo2.png" class="head-logo-img">
            </div>
            <nav class="head-nav">
                <ul>
                    <li><a href="#install">下载</a></li>
                    <li><a href="#game">游戏</a></li>
                    <li><a href="#develop">开发者</a></li>
                    <li><a href="#about">关于</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="banner" id="install">

        <div class="banner-center">
            <div class="banner-left">
                <div class="banner-logo">
                    <img src="./img/logo2.png" class="banner-logo-img">
                </div>
                <p class="banner-text">Stepic游戏平台让玩家可以畅玩游戏，感受闲暇时光的美好。</p>
                <div class="install">
                    <a class="install-link" href="https://stepic-1257902083.cos-website.ap-beijing.myqcloud.com/stepic安装程序.msi">
                        安装 stepic
                    </a>
                </div>
            </div>
            <div class="banner-right">
                <div class="banner-right-content">
                    <div class="banner-right-show"></div>
                </div>
            </div>
        </div>
        

        <div class="learn-more-btn">
            <a href="#game" class="learn-more-link">
                了解更多<span class="down-arrow"></span>
            </a>
        </div>

    </section>

    <section class="gameshow" id="game">
        <div class="show-center">
            <h3>立马开始玩</h3>
            <p>玩你喜欢的游戏，和好友进行比拼，然后分享到你的社交平台。休闲娱乐与等级排名，快来尝试尝试</p>
        </div>
        <ul class="show-ul">
            <li class="game game-1">
                <img src="./img/game/2048.png" alt="">
            </li>
            <li class="game game-2">
                <img src="./img/game/elsfk.png" alt="">
            </li>
            <li class="game game-3">
                <img src="./img/game/tanchi.png" alt="">
            </li>
            <li class="game game-4">
                <img src="./img/game/wziq.png" alt="">
            </li>
        </ul>
    </section>

    <section class="develop" id="develop">
        <div class="develop-center">
            <div class="develop-left">
                <div class="develop-left-content">
                    <div class="develop-left-show"></div>
                </div>
            </div>
            <div class="develop-right">
                <h2 class="develop-title">
                    成为开发者！
                </h2>
                <p class="develop-text">成为开发者，然后上传你的大师级作品，让玩家们口口相传，成为喜闻乐见的游戏开发者！</p>
                <a href="./developer.html" class="develop-link">了解开发者</a>
            </div>
        </div>
    </section>

    <footer class="page-foot" id="about">
        <div class="foot-top">
            <p>stepic游戏平台</p>
        </div>
        <div class="foot-bottom">
            <p>Copyright © 2020 STWPIC. All rights reserved. </p>
            <p>鲁ICP备18050928号-3</p>
        </div>
    </footer>
</body>
</html>